import React, { useEffect, useState } from 'react';
import { Form, Switch, Select, InputNumber, TimePicker, Button, message } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { updateLiftingSettingByArea, addLiftingSettingByArea } from 'api/LiftingSetting';
const { Item } = Form
const { Option } = Select
const { RangePicker }: { RangePicker: any } = TimePicker;
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};
interface IProps {
    form: FormInstance,
    selectedArea: number,
    areaSettingInfo: any,
    updateControlsList: Function,
    showLedTimeRange: boolean,
    toggleShowLedTimeRange: any
}
const SettingForm = (props: IProps) => {
    const [ledType, setLedType] = useState(-1);
    const ledTypeChange = (value: any) => {
        setLedType(value);
        if (value === 2) {
            props.toggleShowLedTimeRange(true)
        } 
    };
    const saveChange = () => {
        const formValues = props.form.getFieldsValue();
        console.log(formValues);
        let params: any = {
            id: props.areaSettingInfo.id,
            infraredFlag: +formValues.infraredFlag,
            collisionFlag: +formValues.collisionFlag,
            inplaceFlag: +formValues.inplaceFlag,
            ledFlag: +formValues.ledFlag,
            ledType: +formValues.ledType,
            ledBeelType: +formValues.ledBeelType,
            voltageFlag: +formValues.voltageFlag,
            ledStartTime: formValues.ledTimeRange ? formValues.ledTimeRange[0]?.valueOf() : '',
            letEndTime: formValues.ledTimeRange ? formValues.ledTimeRange[1]?.valueOf() : '',
            controlClock: formValues.controlClockSet ? formValues.controlClockSet.format('YYYY-MM-DD HH:mm:ss') : '',
            riseTime: formValues.riseTime,
            downTime: formValues.downTime
        };
        updateLiftingSettingByArea(params).then(() => {
            message.success('更新成功');
            props.form.setFields([{ name: 'controlClock', value: props.form.getFieldValue('controlClockSet') }]);
            props.updateControlsList()
        });
    };
    return (
        <Form {...formItemLayout} form={props.form}>
            <Item label="红外线碰撞" name="infraredFlag" valuePropName="checked">
                <Switch />
            </Item>
            <Item label="异常碰撞报警" name="collisionFlag" valuePropName="checked">
                <Switch />
            </Item>
            <Item label="升降到位监测" name="inplaceFlag" valuePropName="checked">
                <Switch />
            </Item>
            <Item label="LED灯带" name="ledFlag" valuePropName="checked">
                <Switch />
            </Item>
            <Item label="LED规则设置">
                <Item name="ledType" noStyle>
                    <Select placeholder="请选择" style={{ width: 200 }} allowClear onChange={ledTypeChange}>
                        <Option value={0}>24h常亮</Option>
                        <Option value={1}>上升&下降闪烁</Option>
                        <Option value={2}>自定义时间</Option>
                    </Select>
                </Item>
                {+props.showLedTimeRange ? (
                    <Item name="ledTimeRange" noStyle>
                        <RangePicker className="ml20" />
                    </Item>
                ) : ''}
            </Item>
            <Item label="蜂鸣器规则设置" name="ledBeelType">
                <Select placeholder="请选择" style={{ width: 200 }} allowClear>
                    <Option value={0}>上升蜂鸣响</Option>
                    <Option value={1}>下降蜂鸣响</Option>
                    <Option value={2}>上升&下降蜂鸣响</Option>
                    <Option value={-1}>关闭</Option>
                </Select>
            </Item>
            <Item label="运行电压检测" name="voltageFlag" valuePropName="checked">
                <Switch />
            </Item>
            <Item label="上升时间">
                <Item name="riseTime" noStyle>
                    <InputNumber min={0} max={10} />
                </Item>
                <span className="ml10">秒</span>
            </Item>
            <Item label="下降时间">
                <Item name="downTime" noStyle>
                    <InputNumber min={0} max={10} />
                </Item>
                <span className="ml10">秒</span>
            </Item>
            <Item label="控制箱时钟校对">
                <Item noStyle name="controlClockSet">
                    <TimePicker />
                </Item>
                <Item noStyle name="controlClock">
                    <TimePicker className="ml20" disabled />
                </Item>
            </Item>
            <Item wrapperCol={{ span: 12, offset: 6 }}>
                <Button type="primary" onClick={saveChange}>
                    保存修改
                </Button>
            </Item>
        </Form>
    )
}
export default SettingForm